<template>
  <div class="search">
    <!-- 顶部 -->
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />

    <div class="card">
      <van-card
        v-for="(item, i) in productList"
        :key="i"
        :price="item.price"
        :desc="item.category"
        :title="item.title"
        :thumb="`/img/product/${item.pic}`"
      >
        <template #tags>
          <van-tag plain type="danger">包邮</van-tag>
        </template>
        <template #footer>
          <van-button
            color="rgb(222, 196, 155)"
            plain
            type="primary"
            size="mini"
            >查看详情</van-button
          >
          <van-button color="rgb(222, 196, 155)" type="primary" size="mini"
            >加入购物车</van-button
          >
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      productList: [],
    };
  },
  methods: {
    onSearch(value) {
      console.log(value);
      this.axios.get(`/v1/products/cha/${value}`).then((result) => {
        console.log(result.data);
        this.productList = result.data.data;
      });
    },
  },
};
</script>

<style>
.search .van-search {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  background-color: rgb(222, 196, 155);
}
.search .van-search__content {
  border-radius: 20px;
}
.search .card {
  margin-top: 54px;
}
.search .van-card__title {
  font-size: 14px;
}
</style>